[제이쿼리] 이벤트 요소 가져오는 방법, event.target

특정 DOM 객체의 요소에서 이벤트가 발생한 경우 해당 요소를 가져오는 방법에 대하여 알아보겠습니다. 자바스크립트의 경우 event.target 키워드를 사용하여 아래와 같이 사용할 경우 해당하는 이벤트 DOM 객체를 불러옵니다. 가장 일반적인 사용방법입니다.



위 코드는 일반적인 자바스크립트를 사용한 방법으로 클릭 이벤트로 발생한 DOM 객체를 event.target 키워드를 사용하여 thisEle 변수에 저장했습니다. 그 뒤에 해당 요소에 빨간색 폰트색상을 적용한 코드입니다.


이 경우 전달받은 DOM 객체는 제이쿼리 객체가 아니기 때문에 DOM 메소드를 사용할 수 없습니다. 어떻게 하면 제이쿼리 요소로 적용할 수 있을까요? 바로 $(event.target)를 사용하는 방법입니다.


$(event.target)

위 코드를 사용하여 이벤트를 전달받으면 전달된 DOM은 제이쿼리 객체로 제이쿼리 사용이 가능합니다. 그럼 이를 사용해 위 코드를 변경해 보겠습니다.

! $(event.target) 사용한 예제코드 보기

상황에 따라 둘 다 사용이 가능하나 제이쿼리를 사용할 경우 후자의 방법인 위의 방법을 사용하는 것이 좋을 것입니다.

# 실행된 예제보기

텍스트색 변경 Click !



위 버튼을 클릭하세요!!